<template>
	<view class="page-lottery-log">
		<view class="p-md">
			<image :src="topImg" mode="widthFix" style="width: 100%;"></image>
			<view class="log-list p-t-md p-b-md">
				<view class="log-list_item m-b-md title">
					<text>奖品</text>
					<text>时间</text>
					<text>状态</text>
				</view>
				<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
				<view v-if="!listLoad">
					<view class="log-list_item p-t-sm p-b-sm" v-for="(item, index) in list.data" :key="item.id">
						<text class="name">{{ item.prize_name }}</text>
						<text class="time">{{ item.create_time }}</text>
						<text class="state" :class="{'text-success' : item.state == 2, 'text-danger' : item.state == 1}">{{ item.state_text }}</text>
					</view>
				</view>
				<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
			</view>
		</view>
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				topImg: require('@/static/images/lottery/person.png'),
				scrollTop: 0,
				showLoading:false,
				listLoad:true,
				listEmptyShow:false,
				status:"loading",
				param: {
					page: 1,
					state: '',
				},
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
			}
		},
		computed: {
			isApple () {
				return uni.getSystemInfoSync().platform === 'ios'
			},
			...mapState({
				userInfo: state => state.user.userInfo,
				configInfo: state => state.config.configInfo,	
				contentText: state => state.content.contentText,
			})
		},
		
		onLoad(){
			this.getList()
		},
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);	
		},
		
		methods: {
			async getList(page = 0){
				if(page){
					this.param.page = page
				}
				const res = await this.$api.plugin.getLotteryLogList(this.param)
				if(res.code == 200){
					let newList = res.data
					if(page > 1){
						newList.data = this.list.data.concat(newList.data) // 合并数组
					}
					this.list = newList
					this.listLoad = false;
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
  .page-lottery-log {
    flex: 1;
    background-color: #FF893F;
	min-height: 100vh;
  }
  .log-list{
    background-color: #fcefc8;
	min-height: 50vh;
	margin-top: -10px;
	&_item{
		font-size: 24rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		-webkit-flex-direction: row;
		justify-content: space-around;
		-webkit-justify-content: space-around;
	}
	&_item.title{
		font-weight: bold;
		ont-size: 26rpx;
		background-color: transparent!important;
	}
	&_item:nth-child(2n+1){
		background-color: #FF893F30;
	}
  }
</style>
